@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#ladder-view
  background-color: black

  @media only screen and (min-width: 1200px)
    background-image: url(/images/pages/league/hero_okar.png), url(/images/pages/league/hero_lady_ida.png), url(/images/pages/league/hero_background_pink.png), url(/images/pages/league/hero_background_pink.png)
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat
    background-position: top 200px left calc(-777px + 10%), top 50px right calc(-510px + 10%), top 200px left calc(-777px + 10%), top 50px right calc(-510px + 10%)
    background-size: 1341px, 1478px, 1341px, 1478px
  max-width: 100%

  #site-content-area
    min-width: 1024px
    max-width: 1372px
    width: 80vw
    border: 1px solid #46381b

  #ladder-top
    background-color: whitesmoke
    margin: -14px -12px 20px -12px
    padding-bottom: 30px
    border-bottom: 1px solid #888

  #course-header
    background-color: black
    font-size: 24px
    padding: 6px 4px 8px
    font-weight: bold

    #course-details-link
      position: absolute
      background-color: white
      padding: 2px 5px
      a
        color: black

    #course-name
      color: white

  .ai-league-logo
    position: absolute
    width: 150px
    left: calc(50% - 50px)
    top: 5px
    z-index: 1030
    height: 105px
    object-fit: cover
    object-position: top

    @media only screen and (max-width: 1600px)
      display: none

  #level-column
    padding-top: 14px
    text-align: center
    position: relative

    img
      margin-top: -23px
      width: 100%

    .dynamic-level-name
      position: absolute
      z-index: 1
      left: 0
      width: 100%
      top: 43px
      text-align: center
      text-shadow: 0px 5px 5px black, -2px 0px 2px black, 2px 0px 2px black, 0px -2px 2px black
      font-size: 72px
      color: $yellow
      font-family: $headings-font-family
      font-variant: small-caps
      @include transition(color .10s linear)

    &:hover img
      filter: brightness(1.2)
      -webkit-filter: brightness(1.2)
      box-shadow: 0 0 5px black

    &:hover .dynamic-level-name
      color: lighten($yellow, 20%)

  h1
    text-align: center

    &.league-header
      margin: 15px 0 20px 0

  .tournament-blurb
    margin-top: -10px
    margin-bottom: 10px
    padding: 10px 20px
    background-color: whitesmoke

    h2
      text-align: center

    a
      font-weight: bold

    .sponsor-logos
      padding: 10px 15px 10px 15px

      -webkit-filter: grayscale(100%)
      -webkit-transition: .5s ease-in-out
      -moz-filter: grayscale(100%)
      -moz-transition: .5s ease-in-out
      -o-filter: grayscale(100%)
      -o-transition: .5s ease-in-out
      filter: grayscale(100%)
      transition: .5s ease-in-out

      &:hover
        -webkit-filter: grayscale(0%)
        -moz-filter: grayscale(0%)
        -o-filter: grayscale(0%)
        filter: grayscale(0%)

      img
        margin: 0px 15px

  .tab-pane
    margin-top: 10px

  .rank-cell, .fight-cell
    text-align: center

  .score-cell
    width: 50px
    text-align: center

  .play-button
    color: white
    font-size: 24px

  .name-col-cell
    max-width: 100px
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden

  .ellipsis-row
    text-align: center

  .simulator-leaderboard-cell
    text-align: center

  // friend column

  .friends-header
    margin-top: 0
    margin-bottom: 5px

  .connect-buttons
    margin-bottom: 15px
    .btn
      margin-right: 5px

  .friend-entry img
    float: left
    margin-right: 10px

  .friend-entry
    margin-bottom: 15px

  .connect-facebook
    background-color: #4c66a4 !important
    background-image: none
    color: white

  .connect-google-plus
    background-color: #CC3234 !important
    background-image: none
    color: white

  #must-log-in button
    margin-right: 10px

  #ladder-action-columns
    margin-top: 30px
    .column
      margin-left: 2%
      margin-right: 2%
    .column-2
      width: 15%
    .column-3
      width: 20%
    .column-4
      width: 30%
    display: flex
    align-items: center
    justify-content: center


  .inline-simulation-stats
    #simulate-tab-view
      margin: -20px -12px 0px -12px
      padding: 5px 0px
      min-height: 35px
      strong
        font-weight: normal

  #winners
    .win
      color: #172
    .loss
      color: #712
    .code-language-cell
      padding: 0 10px
      background: transparent url(/images/common/code_languages/javascript_icon.png) no-repeat center center
      height: 16px

  &.single-ladder
    .row:nth-child(1):after
      clear: none

  #team-offers
    padding: 15px
    margin: 30px -15px -15px -15px
    background-color: black

    h1, h2, h3, h4, h5, h6, p
      color: white

    .team-offer
      border-top: 1px solid #333

      @media only screen and (min-width: 1376px)
        p
          margin-top: 12px

  #spectate-row
    margin-top: 20px
    font-size: 24px
    display: flex
    align-items: center
    justify-content: center

    span
      font-weight: bold

    .spectate-players
      margin-left: 15px
      margin-right: 15px

#tournament-status
  width: 100%
  display: flex
  align-items: center
  justify-content: center
  font-size: 36px

  .ai-league-info
    font-size: 14px

@media only screen and (max-width: 800px)
  #ladder-view
    #level-column img
      width: 100%
